<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户新增</title>
    <script type="text/javascript">
        function delRow(trId) {
            var trEle=document.querySelector('#'+trId);
            var bodyEle=document.querySelector('#userTbody');
            bodyEle.removeChild(trEle);
        }
        var trId=2;
        window.onload = function () {
            var removeAllBtn = document.querySelector('#btn_removeAll');
            removeAllBtn.onclick = function () {
                var bodyEle = document.querySelector('#userTbody');
                bodyEle.innerHTML = '';
            };
            var addBtn = document.querySelector('#btn_submit');
            addBtn.onclick = function () {
                var username = document.querySelector('#username').value;
                var email = document.querySelector('#email').value;
                var tel = document.querySelector('#tel').value;

                //
                var usernameTdEle =document.createElement('td');
                usernameTdEle.innerHTML=username;
                var emailTdEle =document.createElement('td');
                emailTdEle.innerHTML=email;
                var telTdEle =document.createElement('td');
                telTdEle.innerHTML=tel;
                var opTdEle =document.createElement('td');

                var temp='tr'+trId;
                opTdEle.innerHTML='<a href="javascript:delRow(\''+temp+'\')">删除</a>';
                trId++;
                var trEle=document.createElement('tr');
                trEle.id=temp;

                trEle.appendChild(usernameTdEle);
                trEle.appendChild(emailTdEle);
                trEle.appendChild(telTdEle);
                trEle.appendChild(opTdEle);
                var bodyEle=document.querySelector('#userTbody');
                bodyEle.appendChild(trEle);
            }
        }
    </script>
</head>
<body>
<form name="userForm">
    <center>
        用户录入<br/>
        用户名:<input id="username" name="username" type="text" size=15/>
        E-mail:<input id="email" name="email" type="text" size=15/>
        电话:<input id="tel" name="tel" type="text" size=15/>
        <input type="button" value="添加" id="btn_submit"/>
        <input type="button" value="删除所有" id="btn_removeAll"/>
    </center>
</form>
<hr/>
<table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
    <thead>
    <tr>
        <th>用户名</th>
        <th>E-mail</th>
        <th>电话</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="userTbody">
    <tr id="tr1">
        <td>张无忌</td>
        <td>wujizhang@163.com</td>
        <td>18212345678</td>
        <td><a href="javascript:delRow('tr1')">删除</a></td>
    </tr>
    </tbody>
</table>


</body>
</html>